<template>
  <div>
    <div v-for="item in list" :key="item.id" class="bg-yellow p-20 m-v-15">
      <div class="item bg-white relative o-hidden p-20 p-v-0">
        <div class="b-b-dashed p-v-15">
          <div class="flex a-center j-between">
            <!-- <img
              class="flex-s-0 w-40 h-40 b-round"
              :src="require('@/assets/images/merchant.jpg')"
              alt="商家Logo"
            />-->
            <div class="title m-h-10">
              <p class="fs-12 p-v-3 text-title overflow-one">
                <router-link class="flex a-center" :to="`/goods/merchant/${item.bid}`">
                  {{item.bname}}
                  <van-icon class="fs-12" name="arrow" />
                </router-link>
              </p>
              <div class="flex a-center h-20 o-hidden">
                <img class="w-16 fs-12" :src="item.picture" />
                <p class="m-l-5 fs-14 text-content overflow-one">{{item.gname}}</p>
              </div>
            </div>
            <div class="fs-13 min-w-50 text-right">
              <p class="text-red" v-if="item.nprice">¥{{item.nprice}}</p>
              <p class="text-red">{{item.zk / 10}}折</p>
            </div>
          </div>
        </div>
        <div class="text-center p-v-15">
          <router-link :to="`/discount/detail/${item.id}`">
            <van-button class="p-h-30" round type="danger">立即使用</van-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fdae30;
    border-radius: 50%;
    top: 50%;
    transform: translate(0, -50%);
  }
  &:before {
    left: -10px;
  }
  &:after {
    right: -10px;
  }
  .title {
    flex: auto;
  }
}
</style>
